<template>
    <el-row class="offset">
        <el-col>
            <el-form :inline="true">
                <el-col :span="8">
                    <el-form-item label="护理级别">
                        <el-input v-model="orderParam.nursingLevelName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="启用状态">
                        <el-select v-model="orderParam.status" placeholder="请选择">
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form :inline="true">
                        <el-button type="primary" @click="queryAllNursing">搜索</el-button>
                        <el-button @click="clear">重置</el-button>
                    </el-form>
                </el-col>
            </el-form>
        </el-col>
        <el-button style="margin-top: 28px;" type="primary" @click="dialogFormVisible = true">新增级别</el-button><br>
        <el-table :data="tableData" style="width: 80%">
            <el-table-column prop="gradeCode" label="等级编码">
            </el-table-column>
            <el-table-column prop="nursingLevelName" label="护理级别" width="100px">
            </el-table-column>
            <el-table-column prop="nursingAmount" label="护理金额">
            </el-table-column>
            <el-table-column prop="status" label="启用状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === '1'">
                        <i class="el-icon-circle-check" style="color: green; font-size: 1.2em;"></i>
                        <span style="margin-left: 10px;">已启用</span>
                    </span>
                    <span v-else>
                        <i class="el-icon-circle-close" style="color: red; font-size: 1.2em;"></i>
                        <span style="margin-left: 10px;">已禁用</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="护理等级说明">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" style="color: blue;" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button type="text" :style="scope.row.status == 1 ? { color: 'chocolate' } : { color: 'blue' }"
                        @click="updateStatus(scope.row.id)">
                        {{ scope.row.status == 1 ? '禁用' : '启用' }}
                    </el-button>
                    <el-button type="text" style="color: red;" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="12" style="margin-left: 800px;">
            <!-- 放分页部分 -->
            <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
        </el-col>
        <el-dialog title="新建等级" :visible.sync="dialogFormVisible">
            <el-form>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="等级编码">
                            <el-input v-model="registerParam.gradeCode" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="护理金额">
                            <el-input v-model="registerParam.nursingAmount" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="护理级别">
                            <el-input v-model="registerParam.nursingLevel" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="启动状态">
                            <el-radio label="1" v-model="registerParam.status">启用</el-radio>
                            <el-radio label="0" v-model="registerParam.status">禁用</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="护理简介">
                            <el-input v-model="registerParam.remark" type="textarea" placeholder="请输入"
                                style="width: 600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="insert">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑等级" :visible.sync="putawayVisible">
            <el-form>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="等级编码">
                            <el-input disabled v-model="param.gradeCode" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="护理金额">
                            <el-input v-model="param.nursingAmount" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="护理级别">
                            <el-input disabled v-model="param.nursingLevelName" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="启动状态">
                            <el-radio label="1" v-model="param.status">启用</el-radio>
                            <el-radio label="0" v-model="param.status">禁用</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="护理简介">
                            <el-input v-model="param.remark" type="textarea" placeholder="请输入"
                                style="width: 600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 5,
            total: 0,
            orderParam: {
                nursingLevel: '',
                status: ''
            },
            tableData: [],
            dialogFormVisible: false,
            putawayVisible: false,
            registerParam: {
                gradeCode: '',
                nursingLevelName: '',
                nursingAmount: '',
                status: '1',
                remark: ''
            },
            param: {
                gradeCode: '',
                nursingLevelName: '',
                nursingAmount: '',
                status: '',
                remark: ''
            }
        }
    },
    methods: {
        clear() {
            this.orderParam = {}
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryAllNursing();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryAllNursing();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryAllNursing();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryAllNursing();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryAllNursing();
        },
        //查询护理
        queryAllNursing() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post('api/nursing/queryAllNursing', pageParam)
                .then(res => {
                    if (res.data.code == 200) {
                        let pageData = res.data.data;
                        this.tableData = pageData.list;
                        //给分页参数赋值
                        this.total = pageData.total;
                        this.pageNum = pageData.pageNum;
                        this.pageSize = pageData.pageSize;
                    }
                })
        },
        insert() {
            this.$axios.post('api/nursing/insertNursing', this.registerParam)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("添加成功")
                        this.dialogFormVisible = false
                        this.queryAllNursing();
                    } else if (res.data.code == 2006) {
                        this.$message({
                            type: 'error',
                            message: '内容为空!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '等级编码重复!'
                        });
                    }
                })
        },
        del(val) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //发删除请求
                this.$axios.get('api/nursing/deleteNursing/' + val)
                    .then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.queryAllNursing();
                        }
                    })
            }).catch(() => {
                // 用户取消确认，不需要执行任何操作
            });
        },
        updateStatus(val) {
            this.$axios.get('api/nursing/updateNursingStatus/' + val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.queryAllNursing();
                    }
                })
        },
        edit(val) {
            this.putawayVisible = true;
            this.$axios.get('api/nursing/queryById/' + val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.param = res.data.data
                    }
                })
        },
        update() {
            this.$axios.post('api/nursing/updateNursing', this.param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '编辑成功!'
                        });
                        this.putawayVisible = false
                        this.queryAllNursing();
                    } else if (res.data.code == 2006) {
                        this.$message({
                            type: 'error',
                            message: '内容为空!'
                        });
                    }
                })
        }
    },
    created() {
        this.queryAllNursing();
    }
}
</script>

<style scoped>
.section {
    width: 1300px;
    height: 800px;
    background-color: white;
    margin-left: 50px;
    margin-top: 50px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 1px;
}

.offset2 {
    margin-left: 100px;
}

.info {
    display: flex;
    align-items: center;
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}
</style>